<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTools :show-before="false">
        <template v-slot:after>
          <el-button
            type="primary"
            size="small"
            @click="onClickAdd(1, '0', '添加权限')"
          >添加权限</el-button>
        </template>
      </PageTools>

      <el-table ref="table" :data="tableData" row-key="id">
        <el-table-column label="名称">
          <template v-slot="{ row }">
            <i
              v-if="row.pid === '0'"
              style="margin-right: 5px"
              class="el-icon-folder-opened"
              @click="expend(row)"
            />
            <i
              v-else
              style="margin-right: 5px"
              class="el-icon-view"
              @click="expend(row)"
            />
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="标识" prop="code" />
        <el-table-column align="center" label="描述" prop="description" />
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-button
              v-if="row.pid === '0'"
              type="text"
              @click="onClickAdd(2, row.id, '添加')"
            >添加</el-button>
            <el-button
              type="text"
              @click="onEdit(row.id, '编辑')"
            >编辑</el-button>
            <el-button type="text" @click="onClickDel(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisibleAddOrEdit"
      width="50%"
      @close="onClose"
    >
      <el-form
        ref="form"
        :model="addOrEditForm"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="addOrEditForm.name" />
        </el-form-item>
        <el-form-item label="活动标识" prop="code">
          <el-input v-model="addOrEditForm.code" />
        </el-form-item>
        <el-form-item label="活动描述" prop="description">
          <el-input v-model="addOrEditForm.description" />
        </el-form-item>
        <el-form-item label="权限开启">
          <el-switch
            v-model="addOrEditForm.enVisible"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
          >
            />
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button
          :loading="onSvaeLoading"
          type="primary"
          @click="onSvae"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPermissionList,
  addPermission,
  getPermissionInfo,
  editPermissionInfo,
  delPermissionInfo
} from '@/api/permission'
import { transListToTree } from '@/utils'
export default {
  name: 'Permission',
  data() {
    return {
      tableData: [],
      dialogVisibleAddOrEdit: false,
      addOrEditForm: {
        name: '',
        code: '',
        description: '',
        enVisible: '0',
        type: 1,
        pid: 0
      },
      onSvaeLoading: false,
      rules: {
        name: [
          { required: true, message: '权限名称不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '权限标识不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '权限描述不能为空', trigger: 'blur' }
        ]
      },
      dialogTitle: ''
    }
  },

  created() {
    this.loadpermissionList()
  },

  methods: {
    async loadpermissionList() {
      const res = await getPermissionList()
      this.tableData = transListToTree('0', res)
    },
    expend(row) {
      row.isExpend = !row.isExpend
      this.$refs.table.toggleRowExpansion(row, row.isExpend)
    },
    // 添加发请求
    async onSvae() {
      try {
        this.onSvaeLoading = true
        await this.$refs.form.validate()
        if (this.addOrEditForm.id) {
          // 编辑
          editPermissionInfo(this.addOrEditForm)
        } else {
          // 添加
          await addPermission(this.addOrEditForm)
        }
        this.$message.success('成功!')
        this.onClose()
        this.loadpermissionList()
        this.addOrEditForm = {
          name: '',
          code: '',
          description: '',
          enVisible: '0',
          type: 1,
          pid: 0
        }
        this.onSvaeLoading = false
      } catch (err) {
        this.onSvaeLoading = false
        return false
      }
    },
    // 添加
    onClickAdd(type, pid, title) {
      this.dialogTitle = title
      this.addOrEditForm.type = type
      this.addOrEditForm.pid = pid
      this.dialogVisibleAddOrEdit = true
    },
    // 编辑
    async onEdit(id, title) {
      this.dialogTitle = title
      this.dialogVisibleAddOrEdit = true
      this.addOrEditForm = await getPermissionInfo(id)
    },
    // 关闭
    onClose() {
      this.dialogVisibleAddOrEdit = false
      this.$refs.form.resetFields()
    },
    // 删除
    onClickDel(id) {
      this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await delPermissionInfo(id)
          this.$message.success('成功！')
          this.loadpermissionList()
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-table__expand-icon {
  display: none !important;
}
</style>
